Design a Responsive Personal Portfolio Website From Scratch | Customizable - HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

💼 Design Your Own Responsive Personal Portfolio Website from Scratch | Responsive | Fully Customizable - Using HTML, CSS & Javascript

A Photoshop tutorial is included in this video to help you create your own avatar image.

Clear Coding
Easy to Follow

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Design a Responsive Modern Personal Portfolio Website - Html, Css & Javascript</title>

</head>
<body>

</body>
</html>

style.css

/* =========================================
   Google Fonts
========================================= */

/* =========================================
   CSS Variables
========================================= */
:root{
   /* ========== Main colors (HSL - hue, saturation, and lightness) ========== */

/* Blue - hsl(217, 85%, 74%); */
   /* Purple - hsl(245, 54%, 74%); */
   /* Teal - hsl(181, 47%, 49%); */
   /* Yellow - hsl(65, 60%, 70%); */
   /* Green - hsl(162, 60%, 65%); */
   /* Red - hsl(356, 67%, 70%); */
   /* Pink - hsl(330, 73%, 72%); */

--hue: ;
   --sat: ;
   --light: ;

--primary-color: ; /* primary */
   --white-color: ; /* white */
   --dark-color: ; /* dark */

/* ======= Changeable colors for dark/light themes ======= */
   --color-01: ; /* primary to dark */
   --color-02: ; /* white to dark */
   --color-03: ; /* dark to white */
   --color-04: ; /* light-graygray to dark-gray */
   --color-05: ; /* dark to primary */

--body-color: ; /* dark to white */
   --hover-color: ;

/* ======= Background colors ======= */
   --bottom-nav-bg: ;
   --card-bg: ;
   --modal-backdrop-bg: ;
   --footer-bg: ;

--scrollbar-color: ;
   --scrollbar-thumb: ;
   --scrollbar-thumb-hover: ;

/* ======= Font and typography ======= */
   --body-font-family: ;
   
   /* ======= Font sizes ======= */
   --h1-font-size: ;
   --h2-font-size: ;  
   --h3-font-size: ;
   --h4-font-size: ;
   --h5-font-size: ;

--xlarge-font-size: ;
   --large-font-size: ;
   --medium-font-size: ;
   --base-font-size: ;
   --small-font-size: ;
   --tiny-font-size: ;
   
   /* ======= Font weights ======= */
   --font-light: ;
   --font-regular: ;
   --font-medium: ;
   --font-semi-bold: ;
   --font-bold: ;

/* ======= Layering order(z-index) ======= */
   --z-minus: ;
   --z-base: ;
   --z-low: ;
   --z-high: ;
   --z-content: ;
   --z-tooltip: ;
   --z-fixed: ;
   --z-overlay: ;
   --z-modal: ;
   --z-max: ;
}

/* ======= Light theme ======= */

/* =========================================
   Reset / Normalize
========================================= */

/* =========================================
   Base Styles
========================================= */

/* =========================================
   Reusable Styles
========================================= */

/* =========================================
   Components
========================================= */

/* ========== Page scroll bar ========== */

/* ========== Customized cursor ========== */

/* ========== To top button with scroll indicator bar ========== */

/* ========== Buttons ========== */

/* =========================================
   Header
========================================= */

/* ========== Dark/Light theme buttons ========== */

/* =========================================
   Bottom navigation menu
========================================= */

/* =========================================
   Home
========================================= */

/* =========================================
   About Me
========================================= */

/* =========================================
   My Resume
========================================= */

/* =========================================
   Services
========================================= */

/* =========================================
   Portfolio
========================================= */

/* =========================================
   Testimonials
========================================= */

/* =========================================
   Contact Me
========================================= */

/* =========================================
   Footer
========================================= */

/* =========================================
   Media Queries (max-width: 1600px)
========================================= */

/* =========================================
   Media Queries (max-width: 1200px)
========================================= */

/* =========================================
   Media Queries (max-width: 992px)
========================================= */

/* =========================================
   Media Queries (max-width: 768px)
========================================= */

/* =========================================
   Media Queries (max-width: 480px)
========================================= */

main.js

/* =====================================================
   Resume section tabs and tab contents
===================================================== */

/* =====================================================
   Service modal open/close function
===================================================== */

/* =====================================================
   Portfolio modals, tabs and cards
===================================================== */

// Filter portfolio cards according to portfolio tabs.

// Open/Close Portfolio modals.

/* =====================================================
   Testimonial Swiper
===================================================== */

/* =====================================================
   Send/Receive emails from contact form - EmailJS
===================================================== */

/* =====================================================
   Shrink the height of the header on scroll
===================================================== */

/* =====================================================
   Bottom navigation menu
===================================================== */

// Each bottom navigation menu items active on page scroll.

// Javascript to show bottom navigation menu on home(page load).

// Javascript to show/hide bottom navigation menu on home(scroll).

// Hide bottom navigation menu on click menu-hide-btn.

// Show bottom navigation menu on click menu-show-btn.

/* =====================================================
   To-top-button with scroll indicator bar
===================================================== */

/* =====================================================
   Customized cursor on mousemove
===================================================== */

// Cursor effects on hover website elements.

/* =====================================================
   Website dark/light theme
===================================================== */

// Change theme and save current theme on click the theme button.

// Get saved theme icon and theme on document loaded.

/* =====================================================
   ScrollReveal JS animations
===================================================== */

// Common reveal options to create reveal animations.

// Target elements and specify options to create reveal animations.

Buy This Project Complete Source Files from Here -

https://buymeacoffee.com/codingsnow/e/340854

Download File Setup

If the download didn't start automatically, click here.

Thursday, December 5, 2024

Design a Responsive Personal Portfolio Website From Scratch | Customizable - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

main.js

Post a Comment

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Thursday, December 5, 2024

Design a Responsive Personal Portfolio Website From Scratch | Customizable - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

main.js

Post a Comment

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form